<template>
  <header>
    <el-row>
      <el-col :span="24">
        <el-menu
            :default-active="props.activeIndex"
            mode="horizontal"
            class="el-menu-vertical-demo"
            background-color="#2563eb"
            text-color="#f1f5f9"
            active-text-color="#fcd34d"
            router
        >
          <div class="flex items-center justify-center text-black-500 font-semibold">
            <span
                style="font-size: 18px; padding-left: 30px; padding-right: 150px;"
            >
              茶叶溯源平台智能合约系统
            </span>
          </div>

          <el-menu-item :index="`/czshow`" class="font-bold">
            <el-icon><House /></el-icon>
            首页
          </el-menu-item>
          <el-menu-item :index="`/czsystem`" class="font-bold">
            <el-icon><Key /></el-icon>
            企业认证存证系统
          </el-menu-item>
          <el-menu-item :index="`/proDuctCunzheng`" class="font-bold">
            <el-icon><Sell /></el-icon>
            产品认证存证系统
          </el-menu-item>
          <el-menu-item :index="`/jiaoyi`" class="font-bold">
            <el-icon><ShoppingCart /></el-icon>
            交易数据存证
          </el-menu-item>
        <backpart></backpart>
        </el-menu>
      </el-col>
    </el-row>
  </header>
</template>

<script setup>
import Backpart from "../commons/backpart.vue";

const props = defineProps({
  activeIndex: {
    type: String,
    required: true
  }
})

</script>

<style scoped>

</style>